<template>
  <view class="confirmation-container">
    <view class="order-code">
      核销码 {{ orderCode }}
    </view>
    <view class="car-info">
      <span>车辆：</span>{{ carInfo }}
    </view>
    <view class="service-details">
      <p>服务内容</p>
      <view class="service-item" v-for="(item, index) in services" :key="index">
        <span>{{ item.name }}</span>
        <span>¥{{ item.price }}</span>
      </view>
    </view>
    <view class="order-info">
      <p>订单信息</p>
      <view class="order-item">
        <span>原价</span>
        <span>¥{{ originalPrice }}</span>
      </view>
      <view class="order-item">
        <span>优惠</span>
        <span>−¥{{ discount }}</span>
      </view>
      <view class="order-item total">
        <span>实际金额</span>
        <span>¥{{ actualPrice }}</span>
      </view>
      <view class="order-item">
        <span>订单编号</span>
        <span>{{ orderNumber }}</span>
      </view>
      <view class="order-item">
        <span>预约时间</span>
        <span>{{ bookingTime }}</span>
      </view>
      <view class="order-item">
        <span>支付时间</span>
        <span>{{ paymentTime }}</span>
      </view>
      <view class="order-item">
        <span>核销时间</span>
        <span>{{ verificationTime }}</span>
      </view>
    </view>
    <button
      v-if="!isVerified"
      class="confirm-btn"
      @click="confirmVerification"
    >确认核销</button>
    <view v-else class="confirmed-status">已核销</view>

    <!-- Dark Overlay -->
    <view v-if="showOverlay" class="overlay" @click="dialogClose"></view>

    <!-- Customized Dialog for Confirmation -->
    <uni-popup ref="alertDialog" type="dialog" class="custom-dialog" :mask="false">
      <view class="dialog-content">
        <view class="dialog-header">核销此订单</view>
        <view class="dialog-description">请您仔细核对订单，此操作不可撤销，请谨慎操作</view>
        <view class="dialog-buttons">
          <button class="dialog-button confirm" @click="dialogConfirm">核销</button>
          <button class="dialog-button cancel" @click="dialogClose">取消</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderCode: 'MC-1234-5678-9012',
      carInfo: '奔腾FWE4/豫A98FHJ',
      services: [
        { name: '车辆清洗', price: 100 },
        { name: '车辆附加费用', price: 100 }
      ],
      originalPrice: 100,
      discount: 10,
      actualPrice: 90,
      orderNumber: '1232233445',
      bookingTime: '2020-02-18 19:24:28',
      paymentTime: '2020-02-18 19:24:28',
      verificationTime: '',
      isVerified: false,
      showOverlay: false,
    };
  },
  methods: {
    confirmVerification() {
      if (this.$refs.alertDialog) {
        this.showOverlay = true; // Show the overlay
        this.$refs.alertDialog.open();
      } else {
        console.error('alertDialog component not found');
      }
    },
    dialogConfirm() {
      this.isVerified = true;
      this.verificationTime = new Date().toISOString().slice(0, 19).replace('T', ' ');
      this.dialogClose(); // Close the dialog after confirming
    },
    dialogClose() {
      if (this.$refs.alertDialog) {
        this.$refs.alertDialog.close();
      }
      this.showOverlay = false; // Hide the overlay
    }
  }
};
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.confirmation-container {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  width: 300px;
  padding: 20px;
  border-radius: 8px;
  margin-left: 35rpx;
}

.order-code {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.car-info {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}

.service-details,
.order-info {
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.service-details p,
.order-info p {
  font-weight: bold;
  margin-bottom: 10px;
}

.service-item,
.order-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 14px;
}

.order-item.total {
  font-weight: bold;
  color: #d32f2f;
}

.confirmed-status {
  background-color: #d4edda;
  color: #155724;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  margin-top: 20px;
}

/* Dark overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  z-index: 999; /* Ensure it covers the entire page */
}

/* Custom dialog styles */
.custom-dialog {
  background-color: white;
  border-radius: 12px;
  padding: 20px 10px;
  width: 280px; /* Adjust width to match the desired style */
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: fixed; /* Use fixed position to be placed over the overlay */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* Ensure it appears above the overlay */
}

.dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  border-radius: 12px;
}

.dialog-header {
  font-size: 16px;
  margin-bottom: 10px;
  margin-top: 30rpx;
  color: black;
}

.dialog-description {
  font-size: 14px;
  color: #333;
  margin-bottom: 15px;
  padding: 0 10px; /* Adjust padding for a more compact layout */
  line-height: 1.5;
}

.dialog-buttons {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.dialog-button {
  flex: 1;
  margin: 0 5px;
  padding: 8px 0;
  border: none; /* Remove any border */
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.dialog-button.confirm {
  background-color: transparent;
  color: #007aff;
}

.dialog-button.cancel {
  background-color: transparent;
  color: #007aff;
}

.dialog-button:hover {
  opacity: 0.9;
}
.confirm-btn{
	background-color: #007aff;
	color: white;
}
</style>
